<template>
	<view class="container">
    <JCalendar :yearMonth="targetDate" :dataSource="dataSource"
		@dateChange="date_change_fun($event)" @clickChange="signSuccess($event)" >
    </JCalendar>
			<view class='count'>
				<text>截至目前，已连续打卡</text>
				<view class='daynumber'>
					<text class='number'>{{user.signnum}}</text>
					<text class='day'>天</text>
				</view>
	
				<view>当前账户拥有<text class="monthSum">{{user.jifen}}</text>积分，<text>请再接再厉，继续努力!</text></view>
				
			</view>
		<view class="qiandao" v-show="is_show_qiandao">
			<!-- <image src="../../static/images/person/icon-jiangli.png" class="qd_jiangli"></image> -->
			<view class="qd_tit">提示</view>
			
			<view class="qd_main">签到成功，获得 {{gain_score}} 积分！</view>
			<view class="confirm" @click="closeSign">确定</view>
		</view>
		<view class="cover" v-show="is_show_qiandao"></view>		

	</view>
</template>

<script>
	import JCalendar from "@/components/j-calendar/j-calendar.vue";
	export default {
		// 组件
		components: {
			JCalendar
		},
		data() {
			return {
				user:[],
				signuser:[],
                // 当前的日期
                targetDate: new Date().getFullYear()+'-'+ (new Date().getMonth() + 1),
                // 已经签到的数据列表
                dataSource: [],
				is_show_qiandao: false,
				gain_score: 0
			}
		},

		onLoad: function (option) {
			this.helper.checkLogin();
			this.getSignInList();
		},
		methods: {
			navBack: function() {
				return uni.navigateBack()
			},
			navToUrl: function(url) {
				if(url == "/pages/help/service"){
					return uni.switchTab({
						url: url
					});
					
				}
				return uni.navigateTo({
					url: url
				});
			},
			
			getSignInList:function(){

				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['token='+info.token,'timestamp='+timestamp]);
				this.helper.req({
					api:"getSignInList",
					timestamp:timestamp,
					data:{token:info.token},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					this.user = res.data.data.userinfo;
					this.signuser = res.data.data.signuser;
					this.targetDate = res.data.data.date;
					
					let arr = res.data.data.signlist;
					if(arr.length > 0){
						arr.forEach((item,index)=>{
							this.dataSource.push(item.signtime);
							
						})
					}
					setTimeout(() => {
						uni.hideLoading();
					}, 300);
				})
			},
			// 簽到成功 
			signSuccess(){
				this.helper.checkLogin();
				var token = 'token';
				var info = uni.getStorageSync("userinfo");
				if (info.token) {
					token = info.token;
				}
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['token=' + token, 'timestamp=' + timestamp]);
				this.helper.req({
					api: "doQiandao",
					timestamp: timestamp,
					data: {
						token: token
					},
					header: {
						sign: sign
					},
					method: 'POST',
				}).then(res => {
					this.gain_score=res.data.data
					this.is_show_qiandao = true				
					uni.hideLoading();
				})
			},
            // 点击天
            day_change_fun(day) {
                // console.log(day);
                // 如果没有签到（可以补签）
                // if (!day.click) {
                //  this.list.push(day.r);
                // }
                // 如果今天没有签到(只签到今天的)
                if (!day.click && day.type == "today") {
					this.signSuccess();
                    this.list.push(day.r);
                }
            },
            date_change_fun(date) {
                // 更新日期
                this.targetDate = date;
				console.log(this.targetDate)
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['token='+info.token,'targetDate='+this.targetDate,'timestamp='+timestamp]);
				this.helper.req({
					api:"getSignInList",
					timestamp:timestamp,
					data:{token:info.token,targetDate:this.targetDate},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					this.user = res.data.data.userinfo;
					this.signuser = res.data.data.signuser;
					
					let arr = res.data.data.signlist;
					if(arr.length > 0){
						arr.forEach((item,index)=>{
							this.dataSource.push(item.signtime);
						})
					}
					setTimeout(() => {
						uni.hideLoading();
					}, 300);
				})				

                // 清空已经签到的列表
                //this.list = [];
                // 根据日期获取已经签到的列表然后赋值
                //this.list = [];
            },
			closeSign:function(){
				this.is_show_qiandao = false
				uni.reLaunch({
				  url: '/pages/game/qiandao'
				});	
			}
		}
	}
</script>

<style lang="scss">
	page{
		min-height: 220vw;
		background: #ddeafd;
	}
	.cover{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: #000;
		opacity: 0.5;
		z-index: 9;
	}	
.qiandao{
		width: 80vw;
		height: 50vw;
		position: fixed;
		top: 60vw;
		left: 10vw;
		background-color: #FFF;
		border-radius: 10px;
		z-index: 99;
		.qd_jiangli{
			width: 26px;
			height: 26px;
			position: absolute;
			top: 4vw;
			left: 24vw;
		}
		.qd_tit{
			width: 20vw;
			line-height: 30px;
			font-size: 20px;
			color:#333;
			font-weight: bold;
			text-align: center;
			position: absolute;
			top: 4vw;
			left: 30vw;
		}
		.qd_main{
			line-height: 30px;
			font-size: 16px;
			color:#444;
			width: 100%;
			text-align: center;
			position: absolute;
			top: 20vw;
			left: 0;
		}
		.confirm{
			line-height: 40px;
			font-size: 20px;
			color: #4079ff;
			width: 100%;
			text-align: center;
			position: absolute;
			bottom: 4vw;
			left: 0;
		}
	}
	.count .daynumber {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.count .daynumber .day {
		margin-top: 50rpx;
	}

	.count {
		margin: 30rpx;
		padding: 30rpx;
		display: flex;
		text-align: center;
		border-radius: 10px;
		flex-direction: column;
		justify-content: center;
		background-color: #fff;
		align-items: center;
		box-shadow: 0 0px 20px rgba(180, 204, 242, .2);
	}

	.count .number {
		color: #fff;
		font-size: 60rpx;
		background: linear-gradient(to top, #a0c3ff, #4f8efd);
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin: 20rpx;
	}

	.monthSum {
		color: #4f8efd;
		font-size: 40rpx;
	}

	.count text {
		margin: 10rpx;
	}	
</style>
